/*
    ========
    基本样式
    =======   */
html{
    font-size:62.5%;
    background-color: #f6fff4;
}
::selection{
    background-color:#89f3ff;
    text-shadow:none;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after{
    content:" ";
    display:table;
}
.clearfix:after{
    clear:both;
}

/*
    =========
    自定义样式
    =========
               */
.top{
    background-color: #119fe2;
    width:98%;
    margin:0.5% auto;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 5px #B4B4B4;
    -moz-box-shadow: 5px 5px 5px #B4B4B4;
    box-shadow: 5px 5px 5px #B4B4B4;
}

.top img,.top-content{
    float:left;
}

.top img {
    position:relative;
    margin:5rem auto 2rem 35%;
}

.top .top-content{
    text-align:center;
    margin-top:3rem;
    margin-left:6rem;
}

.top-content .top-title{
    font-size:2.5rem;
    color: #564f54;
}

.top-content .top-title:after{
    position:relative;
    margin:1rem auto 1rem auto;
    border:1px solid #000000;
    width:21rem;
    clear:both;
}

.top-content .top-time{
    color:#cac5cb;
}

/*列表开始*/
.list{
    display:inline-block;
    margin:0.5% auto;
    width:98%;
    height:70%;
    float:left;
}
ul li{
    float:left;
    width:98%;
    margin:auto 1% 2rem 2%;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 5px #B4B4B4;
    -moz-box-shadow: 5px 5px 5px #B4B4B4;
    box-shadow: 5px 5px 5px #B4B4B4;
}

.list span,img,p,.feed{
    float:left;
    display:inline-block;
}
.list li span{
    font-size:5rem;
    color:#ffba09;
    margin-left:4%;
    margin-top:2%;
    margin-right:4%;
    width:5rem;
}
.list li img{
    border-radius:50%;
    height:10rem;
    width:10rem;
}

.list li .name{
    text-align:center;
    font-size:2.7rem;
    color:#949a99;
    width:7rem;
    margin-left:10%;
    margin-right:15%;
}

.list li .waketime{
    text-align: center;
    line-height: 2.3;
    width:8rem;
    font-size:2rem;
}

.heart {
    background: url(../img/web_heart_animation.png) left no-repeat;
    height: 100px;
    width: 100px;
    cursor: pointer;
    position: absolute;
    background-size:2900%;
}

.heart:hover, .heart:focus{
    background-position: right;
}

/*动画*/
@-webkit-keyframes heartBlast {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}

@keyframes heartBlast {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}

.heartAnimation {
    display: inline-block;
    -webkit-animation-name: heartBlast;
    animation-name: heartBlast;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
    background-position: right;
}

.feed{
    position:relative;
    margin-left:25%;
}
.feed p{font-family: "Microsoft YaHei",'Georgia', Times, Times New Roman, serif; font-size: 2.5rem;margin: 0; padding: 0;}

a{color: #7ac9ed;}

.likeCount{font-family: 'Georgia', Times, Times New Roman, serif; margin-top: 3.2rem;margin-left: 6.8rem;font-size: 2.5rem;color: #999999;
text-align: center;}

@media only screen and (min-width: 481px) and (max-width:800px){
    .top img {
        position:relative;
        margin:5rem auto 2rem 40%;
    }
    .top .top-content{
        text-align:center;
        margin-top:3rem;
        margin-left:20rem;
    }
    .list li span{
        font-size:5rem;
        color:#ffba09;
        margin-left:4%;
        margin-top:2%;
        margin-right:4%;
        width:5rem;
    }
    .list li img{
        border-radius:50%;
        margin-top:2rem;
        height:3rem;
        width:3rem;
    }

    .list li .name{
        margin-top:3rem;
        font-size:0.7rem;
        color:#949a99;
        width:3rem;
        margin-left:4%;
        margin-right:9%;
    }

    .list li .waketime{
        margin-top:0.9rem;
        width:4rem;
        font-size:2rem;
    }
}

@media only screen and (min-width: 321px) and (max-width:480px){
    .list li span{
        font-size:3rem;
        color:#ffba09;
        margin-left:4%;
        margin-top:1.5rem;;
        margin-right:4%;
        width:3rem;
    }
    .list li img{
        border-radius:50%;
        margin-top:1.5rem;
        height:3rem;
        width:3rem;
    }

    .list li .name{
        font-size:0.7rem;
        margin-top:2.3rem;
        color:#949a99;
        width:3rem;
        margin-left:1.5rem;
    }

    .list li .waketime{
        text-align: center;
        width:2rem;
        font-size:1rem;
    }

    .feed{
        position:relative;
        margin-top:0.7rem;
        margin-left:12%;
    }

    .heart {
        background: url(../img/web_heart_animation.png) left no-repeat;
        height: 5rem;
        width: 5rem;
        cursor: pointer;
        position: absolute;
        background-size:2900%;
    }
    .likeCount{font-family: 'Georgia', Times, Times New Roman, serif; margin-top: 1.5rem;margin-left: 4.5rem;font-size: 1.7rem;color: #999999;
        text-align: center;}
}

@media only screen  and (max-width:320px){
    .top img {
        position:relative;
        margin:5rem auto 2rem 30%;
    }
    .top .top-content{
        margin-left:5rem;
    }
    .top-content .top-title:after{
        width:10rem;
    }
    .list li span{
        font-size:4.2rem;
        color:#ffba09;
        margin-left:4%;
        margin-top:1.5rem;
        margin-right:4%;
        width:5rem;
    }
    .list li img{
        border-radius:50%;
        margin-top:2rem;
        height:3rem;
        width:3rem;
    }

    .list li .name{
        margin-top:3rem;
        font-size:0.7rem;
        color:#949a99;
        width:3rem;
        margin-left:4%;
        margin-right:9%;
    }

    .list li .waketime{
        margin-top:2.5rem;
        width:4rem;
        font-size:1.2rem;
    }

    .feed{
        position:relative;
        margin-top:0.7rem;
        margin-left:0.2rem;
    }

    .heart {
        background: url(../img/web_heart_animation.png) left no-repeat;
        height: 5rem;
        width: 5rem;
        cursor: pointer;
        position: absolute;
        background-size:2900%;
    }
    .likeCount{font-family: 'Georgia', Times, Times New Roman, serif; margin-top: 1.5rem;margin-left: 3.5rem;font-size: 1.5rem;color: #999999;
        text-align: center;}
}